﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>03: CodeMirror Test</title>
	<!-- -->
	<style type="text/css">
		body, html {
			width: 100%;
			height: 100%;
			margin: 0;
			overflow: hidden;
			font-family: "Segoe UI", Arial, Verdana;
			font-size: 9pt;
			background-color: #F1F1F1;
		}
		
		/*.CodeMirror-line-numbers {
        width: 2.2em;
        color: #aaa;
        background-color: #eee;
        text-align: right;
        padding-right: .3em;
        font-size: 10pt;
        font-family: monospace;
        padding-top: .4em;
      }*/
	</style>
	<script src="../../../bootloader.js" type="text/javascript"></script>
	<!-- -->
	<script type="text/javascript">
		go = function() {
			view = new opus.View({
				width: "100%",
				height: "100%",
				styles: {border: 1, padding: 8, borderColor: "green"},
				layoutKind: "vbox",
				controls: [
					{styles: {bgColor: "red"}, h: 50, w: "100%"},
					{type: "opus.Aristo.Button", caption: "Toggle", w: 70, onclick: "toggle"},
					{name: "editor", type: "opus.Codemirror.Editor", w:"100%", h: "100%", showing: false, script: "function() {\n}\n\nfoo=5;\n",styles: {border: 2}},
					{styles: {bgColor: "red"}, h: 50, w: "100%"}
				],
				toggle: function() {
					this.$.editor.showing ? this.$.editor.hide() : this.$.editor.show();
					this.$.editor.reflowParent();
				}
			});
		}
	</script>
</head>
<body onload="go()">
</body>
</html>
